<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ include file="../common/common.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>修改</title>
</head>
<body>
	<form action="${ctx}/item/edit" method="post" enctype="multipart/form-data">
	    <input type="hidden" id="id" name="id" value="${data.id }"/>
		标题:<input type="text" name="title" value="${data.title }"/><br/>
		价格:<input type="text" name="price" value="${data.price }"/><br/>
		数量:<input type="text" name="num" value="${data.num }"/><br/>
		备注:<textarea rows="4" cols="40" name="remark">${data.remark }</textarea><br/>
		图片:<input type="file" name="picFile" /><button type="button" id="addFile">添加</button>
		<div id="picDiv">
			<c:forEach var="o" items="${imgs }" varStatus="indx">
				<span>
					<img alt="" src="${ctx}/item/getImg/${o}" width="150px" height="150px" value="${o}"/>
					<input type="button" name="delServerImg" value="删除图片"/>
				</span>
				<br/>
			</c:forEach>
		</div>
		<input type="submit" value="保存" />
		<input type="reset" value="重置" />
	</form>
</body>
<script type="text/javascript">
$(function(){  
	/** 添加文件框*/
	$("#addFile").click(function(){
		var spanFile = $("<span><input type='file' name='picFile'><button type='button' name='delFileName' onclick='delFile(this)'>删除</button><span><br/><br/>");
		$("#picDiv").append(spanFile);
	});
	/**删除文件框*/
	$("button[name='delFileName']").live('click', function() {
		$(this).parent().remove();
	});
	
	/*
	图片放大效果
	*/
	 $("img").live("click",function(){
         var width = $(this).width();
         if(width==150){
             $(this).width(600);
             $(this).height(400);
         }else{
             $(this).width(150);
             $(this).height(150);
         }
     });
	/*鼠标进入
	 $('img').mouseenter(function(){
         $(this).width(600);
         $(this).height(400);
     });*/
	 /*鼠标离开
	 $('img').mouseleaver(function(){
         $(this).width(150);
         $(this).height(150);
     }); */
	 
	 $('img').hover(function(){
		 $(this).width(600);
         $(this).height(400);
        },function(){
        	$(this).width(150);
            $(this).height(150);
        }
     );
     /*删除服务器上的图片*/
	 $("input[name='delServerImg']").live('click', function() {
		 if(confirm("您确定删除这个图片吗？")){
			 var curSpan = $(this).parent();//当前对象的父元素
			 var fileId = $(this).parent().find("img").attr("value");
			 var itemId = $("#id").val();
			 $.post("${ctx}/item/deleteImg",{"fileId":fileId,"itemId":itemId},function(data,textStatus){
				 var dataJson = $.parseJSON(data);
				 if(dataJson.msg == "true"){  //如果返回true表示删除成功,再删除页面的图片
					 curSpan.remove();//如何此处仍然使用 这个$(this).parent(),就会有问题，因为这里的this和上面的this已经不是同一个,这里的this是data
				 }else{
					 alert("删除图片失败");
				 }
			 });
		 }	
	 });
}); 
</script>
</html>